<template>
    <div class="banner-operation banner-space" :class="containerClass">
        <div class="swiper-banner-container b-swiper-banner-container">
            <div
                class="swiper-wrapper b-swiper-wrapper"
                :options="swiperOption"
                circular="true"
                @ready="handlerReady"
            >
                <div
                    v-for="(item, index) in list"
                    :key="index"
                    class="swiper-slide b-swiper-slide"
                    :class="{ 'swiper-slide-radius': realCenterSlide }"
                >
                    <div>
                        <img
                            @click="emitClick(item, 'banner', index)"
                            class="b-opera-img"
                            :src="item.imgUrl"
                            alt=""
                            mode="widthFix"
                        />
                    </div>
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
        <template v-if="isShowAdTag">
            <i class="ad-close-icon" @click.stop="close()"></i>
            <i class="ad-slogan-icon"></i>
        </template>
    </div>
</template>
<script>
import Swiper from 'swiper/js/swiper.js';
import 'swiper/css/swiper.css';

let key = 1;
export default {
  name: 'BannerSwiper',
  data() {
    return {
      mySwiper: null,
      containerClass: `banner-operation${key++}`,
    };
  },
  computed: {
    onlyOne() {
      return this.list.length === 1;
    },
    realCenterSlide() {
      return this.centeredSlides && !this.onlyOne;
    },
    swiperOption() {
      return {
        pagination: this.onlyOne
          ? ''
          : {
            el: `.${this.containerClass} .swiper-pagination`, // fix 多个轮播图共用一个分页器bug
          }, // 一张的时候隐藏分页器
        watchOverflow: true,
        autoplay: {
          disableOnInteraction: false,
        }, // 可选选项，自动滑动
        loop: !this.onlyOne,
        on: {
          init: (() => {
            const self = this;
            return function () {
              const index = this.realIndex;
              self.$emit('init', self.list[index], index);
            };
          })(),
          tap: () => {
            const index = this.mySwiper.realIndex;
            this.$emit('click', this.list[index], index);
          },
          slideChange: (() => {
            const self = this;
            return function () {
              const index = this.realIndex;
              self.$emit('slideChange', self.list[index], index);
            };
          })(),
        },
        ...(this.realCenterSlide
          ? {
            slidesPerView: 'auto',
            centeredSlides: true,
            spaceBetween: `${8 / 3.75}%`,
          }
          : {}),
      };
    },
  },
  props: {
    list: {
      type: Array,
      default() {
        return [];
      },
    },
    centeredSlides: {
      type: Boolean,
      default: false,
    },
    isHome: {
      type: Boolean,
      default: false,
    },
    isShowAdTag: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    initSwiper() {
      this.mySwiper = new Swiper('.swiper-banner-container', this.swiperOption);
    },
    emitClick(...info) {
      this.isHome && this.$emit('jumpBannerPage', ...info);
    },
    close() {
      if (this.mySwiper) {
        this.$emit('deleteSwiperByIndex', this.mySwiper.realIndex);
      }
    },
    handlerReady(swiper) {
      this.mySwiper = swiper;
    },
  },
  mounted() {
    this.initSwiper();
  },
};
</script>
<style lang="scss" scoped>
//.swiper-wrapper {
//    text-align: center;
//}
// .swiper-wrapper{
//  overflow-x: hidden;
//  overflow-y: auto;
// }

.slide-image {
    width: 100%;
}

.banner-space {
    margin: 10px 0;
}

/*operation*/
.banner-operation {
    position: relative;
    padding: 0;
    width: 100vw;
    .ad-close-icon {
        position: absolute;
        top: 5px;
        right: 5px;
        width: 15px;
        height: 15px;
        z-index: 3;
        display: inline-block;
        // background: url("../../../public/images/close30.png") no-repeat center center;
        background-size: contain;

        &:before {
            position: absolute;
            right: 0;
            top: 0;
            content: "";
            width: 42px;
            height: 42px;
        }
    }

    .ad-slogan-icon {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 3;
        width: 32px;
        height: 16px;
        display: inline-block;
        // background: url("../../../public/images/slogan_txt.png") no-repeat center center;
        background-size: contain;
    }
}

.b-opera-img {
    width: 100%;
    height: 120px;
    display: block;
}

.b-swiper-banner-container {
    position: relative;
    width: 100%;
    height: 120px;
    overflow: hidden;
    z-index: 2;
}

.b-swiper-wrapper,
.b-swiper-slide {
    width: 100%;
    height: 120px;
}

.swiper-pagination {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    bottom: 8px;
    font-size: 0;
    -webkit-box-sizing: border-box;
}

.swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    opacity: .3;
    margin: 0 4px;
}

.swiper-pagination-bullet.swiper-pagination-bullet-active {
    opacity: 1;
    background-color: #22253b;
}

.swiper-banner-container-horizontal>.swiper-pagination-bullets,
.swiper-pagination-custom,
.swiper-pagination-fraction {
    bottom: 7px;
}

.swiper-banner-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 3px;
}

.b-swiper-slide {
    width: 343px;
    overflow: hidden;
    &.swiper-slide-radius {
        border-radius: 6px;
    }
}
.swiper-pagination {
    bottom: 4px;
    ::v-deep.swiper-pagination-bullet {
        width: 3px;
        height: 3px;
        border-radius: 1.5px;
        background: #fff;
        transition: all 0.3s;
        opacity: 1;
        &.swiper-pagination-bullet-active {
            width: 18px;
            background: #fff;
        }
    }
}
</style>
